<template>
  <div class="bu">
<div :class="{shu:true,active:currentIndex==index}" v-for="(item,index) in zu" :key="index" @click="handle(index)">
    <div :class="{iconfont:true,[item.icon]:true,} "></div>
    <div class="zi">{{item.text}}</div>
</div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            currentIndex:0,
            zu:[
                {id:1,icon:'icon-infenicon18',text:'首页'},
                {id:2,icon:'icon-faxiandingdan',text:'爆爆团'},
                {id:2,icon:'icon-zixun',text:'订单'},
                {id:3,icon:'icon-yonghu',text:'我的'},
            ]
        }
    },
    methods:{
    handle(index){
      this.currentIndex = index;
    }
  }

}
</script>

<style scoped>
.bu{
    height: 60px;
    border-top: 2px solid #eee;
    border-bottom: 2px solid #eee;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    background-color: white;
}
.shu{
    text-align: center;
    margin-top: 10px;
}
.iconfont{
    font-size: 22px;
}
.active{
    color: red;
}
</style>